{% stylesheet %}
    .block_collection_nav .block_collection_nav_content ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .block_collection_nav .block_collection_nav_content ul li{
        width: calc(50% - 15px);
        margin-bottom: 30px;
    }
    .block_collection_nav .block_collection_nav_item{
        display: flex;
        align-items: center;
    }
    .block_collection_nav .block_collection_nav_image{
        width: 47%;
    }
    .block_collection_nav .block_collection_nav_image img{
        object-fit: cover;
        width: 100%;
    }
    .block_collection_nav .block_collection_nav_item dl{
        padding: 20px 50px;
    }
    .block_collection_nav .block_collection_nav_item dt{
        margin-bottom: 20px;
    }
    .block_collection_nav .block_collection_nav_item dt a{
        font-size: 24px;
        font-weight: 500;
    }
    .block_collection_nav .block_collection_nav_item dd{
        margin-bottom: 10px;
    }
    .block_collection_nav .block_collection_nav_item dd a{
        position:relative;
    }
    .block_collection_nav .block_collection_nav_item dd a:after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        right: 0;
        width: 0;
        height: 1px;
        background-color: var(--color-main);
        transition: .5s;
        opacity: 0;
    }
    .block_collection_nav .block_collection_nav_item dd a:hover:after {
        opacity: 1;
        width: 100%;
    }
    @media (max-width: 1200px){
        .block_collection_nav .block_collection_nav_item dl{
            padding: 20px 0 20px 30px;
        }
    }
    @media (max-width: 1000px){
        .block_collection_nav .block_collection_nav_item{
            flex-direction: column;
        }
        .block_collection_nav .block_collection_nav_image{
            width: 100%;
        }
    }
    @media (max-width: 767px){
        .block_collection_nav .block_collection_nav_content ul li{
            width: calc(50% - 7.5px);
        }
        .block_collection_nav .block_collection_nav_item dl{
            padding: 15px;
            width: 100%;
            box-sizing: border-box;
        }
        .block_collection_nav .block_collection_nav_item dt a{
            font-size: 20px;
        }
    }


{% endstylesheet %}
<div class="block_collection_nav" id="block_collection_nav_{{ block.id }}"> 
    <div class="{% if section.settings.is_fill %}full_container_wrapper{% else %}container_wrapper{% endif %}">
        {% if section.settings.title != '' or section.settings.detail != '' %}
        <div class="block_title">
            {% if section.settings.title != '' %}<h2>{{ section.settings.title }}</h2>{% endif %}
            {% if section.settings.detail != '' %}<div class="block_detail">{{ section.settings.detail }}</div>{% endif %}
        </div>
        {% endif %}
        <div class="block_collection_nav_content">
            <ul>



                {% if section.blocks.size %}
                {% for block in section.blocks %}

                {% get_nav nav_id={block.collection_nav.id} %}
                {% assign collection_nav_list = nav %}
                
                
                <li>
                    <div class="block_collection_nav_item" style="background-color: {{ block.collection_nav_bg }};">
                        <a class="block_collection_nav_image" {% if collection_nav_list.nav_item[0].url_json.url != "" %}href="{{ collection_nav_list.nav_item[0].url_json.url }}"{% else %}href="javascript:(void);"{% endif %} >
                            <img data-src="{{ block.collection_pic.src }}" src="{{ 'empty.png' | public_asset_abs_url }}" alt="{{ collection.title }}">
                        </a>
                        {% if block.collection_nav.id %}
                        <dl>
                            {% for item in collection_nav_list.nav_item %}
                            <dt>{% include "nav_a",class:'nav-li-a' , nav : item  %}</dt>
                            {% for el in item.children %}
                            <dd>{% include "nav_a",class:'nav-li-a' , nav : el  %}</dd>
                            {% endfor %}
                            {% endfor %}
                        </dl>
                        {% else %}
                        <dl>
                            <dt><a href="javascript:(void);">Collection level 1</a></dt>
                            <dd><a href="javascript:(void);">Collection level 2</a></dd>
                            <dd><a href="javascript:(void);">Collection level 2</a></dd>
                            <dd><a href="javascript:(void);">Collection level 2</a></dd>
                            <dd><a href="javascript:(void);">Collection level 2</a></dd>
                            <dd><a href="javascript:(void);">Collection level 2</a></dd>
                        </dl>
                        {% endif %}
                    </div>
                    
                </li>

                
                {% endfor %}

                {% else %}
                {% for i in (1..4) %}
                 <li>
                    <div class="block_collection_nav_item">
                        <a class="block_collection_nav_image" href="javascript:(void);" data-tips="请选择专辑" >
                            <img src="{{ 'empty.png' | public_asset_abs_url }}">
                        </a>
                        <dl>
                            <dt><a href="javascript:(void);">Collection level 1</a></dt>
                            <dd><a href="javascript:(void);">Collection level 2</a></dd>
                            <dd><a href="javascript:(void);">Collection level 2</a></dd>
                            <dd><a href="javascript:(void);">Collection level 2</a></dd>
                            <dd><a href="javascript:(void);">Collection level 2</a></dd>
                            <dd><a href="javascript:(void);">Collection level 2</a></dd>
                        </dl>
                    </div>
                    
                </li>
                {% endfor %}
                {% endif %}
            </ul>
        </div>

    </div>
</div>
{% schema %}
{
  "tag": "section",
  "class": "block_collection",
  "is_global": false,
  "name": {
    "zh_CN": "专辑(导航)"
  },
  "max_blocks": "20",
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "设置"
      }
    },
    {
        "type": "card_input",
        "id": "title",
        "label": {
            "zh_CN": "标题"
        },
        "placeholder": {
            "zh_CN": "请输入标题"
        }
    },
    {
        "type": "card_text_editor",
        "id": "detail",
        "label": {
            "zh_CN": "简短描述"
        },
        "placeholder": {
        "zh_CN": "请输入描述"
        }
    }
  ],
  "blocks": [
    {
        "name": {
            "zh_CN": "专辑编辑"
        },
        "type": "collection-item",
        "settings": [
            {
                "type": "card_image",
                "label": {
                    "zh_CN": "专辑图片"
                },
                "default":{
                "src":"",
                "alt":""
                },
                "id": "collection_pic"
            },
            {
                "type": "card_nav",
                "label": {
                    "zh_CN": "选择菜单"
                },
                "default":{
                "id":"",
                "title":""
                },
                "id": "collection_nav"
            },
            {
                "type": "card_color",
                "label": {
                    "zh_CN": "专辑背景颜色"
                },
                "default":"#ffffff",
                "id": "collection_nav_bg"
            }
        ]
    }
  ],
  "default": {
    "settings": {
      "title": "",
      "detail": ""
    },
    "blocks": [
        {
            "collection_pic": {
                "src":"",
                "alt":""
            },
            "collection_nav": {
                "id":"",
                "title":""
            },
            "block_type": "collection-item"
        },
        {
            "collection_pic": {
                "src":"",
                "alt":""
            },
            "collection_nav": {
                "id":"",
                "title":""
            },
            "block_type": "collection-item"
        },
        {
            "collection_pic": {
                "src":"",
                "alt":""
            },
            "collection_nav": {
                "id":"",
                "title":""
            },
            "block_type": "collection-item"
        },
        {
            "collection_pic": {
                "src":"",
                "alt":""
            },
            "collection_nav": {
                "id":"",
                "title":""
            },
            "block_type": "collection-item"
        }
    ]
  }
}
{% endschema %}